n<template>
	<AdminLayout activeKey="analytics" :breadcrumbs="['首页','数据分析']" tabTitle="数据分析">
		<view class="analytics-page">
			<!-- 顶部工具栏 -->
			<view class="toolbar">
				<view class="toolbar-left">
					<view class="page-header">
						<text class="page-title">运营数据看板</text>
						<text class="page-subtitle">实时监控平台运营情况与风险指标</text>
					</view>
					<view class="last-update">
						<text class="iconfont icon-shijian"></text>
						<text>最后更新：{{ lastUpdateTime }}</text>
					</view>
				</view>
				<view class="toolbar-right">
					<!-- 快速筛选标签 -->
					<view class="quick-filters">
						<text class="filter-tag" :class="{ active: quickFilter === 'week' }" @click="setQuickFilter('week')">本周</text>
						<text class="filter-tag" :class="{ active: quickFilter === 'month' }" @click="setQuickFilter('month')">本月</text>
					</view>
					
					<picker mode="selector" :range="monthOptions" @change="onMonthPickerChange" class="date-picker">
						<view class="picker-btn">
							<text class="iconfont icon-riqi"></text>
							<text class="picker-text">{{ month || '全部月份' }}</text>
						</view>
				</picker>
					
					<button class="toggle-data-btn" @click="toggleDataSource" :class="{ active: useRealData }">
						<text class="iconfont icon-qiehuan"></text>
						<text>{{ useRealData ? '真实数据' : '模拟数据' }}</text>
					</button>
					<button class="refresh-btn" @click="loadAllData">
						<text class="iconfont icon-shuaxin"></text>
						<text>刷新数据</text>
					</button>
				</view>
			</view>

			<!-- 核心指标卡片 -->
			<view class="overview-cards">
				<view class="metric-card" v-for="(metric, index) in overviewMetrics" :key="index">
					<view class="metric-icon" :style="{ background: metric.color }">
						<text class="iconfont" :class="metric.icon"></text>
					</view>
					<view class="metric-content">
						<view class="metric-value">{{ metric.value }}</view>
						<view class="metric-label">{{ metric.label }}</view>
						<view class="metric-trend" :class="{ positive: metric.trend > 0, negative: metric.trend < 0 }">
							<text class="trend-icon">{{ metric.trend > 0 ? '↗' : metric.trend < 0 ? '↘' : '→' }}</text>
							<text class="trend-text">{{ Math.abs(metric.trend) }}%</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 数据分析区域 -->
			<view class="analytics-grid">
				<!-- 用户数据分析 -->
				<view class="chart-panel">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-yonghu panel-icon"></text>
							<text>用户数据分析</text>
						</view>
						<view class="panel-tabs">
							<text class="tab-item" :class="{ active: userActiveTab === 'growth' }" @click="switchUserTab('growth')">用户增长</text>
							<text class="tab-item" :class="{ active: userActiveTab === 'active' }" @click="switchUserTab('active')">活跃度</text>
						</view>
					</view>
					<view class="chart-container">
						<QiunDataCharts 
							type="line" 
							:opts="userChartOpts"
							:chartData="userChartData"
							:loadingType="1"
							background="transparent"
							canvas2dH5="true"
							:canvas2dH5Width="600"
							:canvas2dH5Height="400"
						/>
					</view>
					<view class="chart-stats">
						<view class="stat-item">
							<text class="stat-label">总用户数</text>
							<text class="stat-value">{{ userStats.total }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">本月新增</text>
							<text class="stat-value">{{ userStats.monthlyNew }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">活跃用户</text>
							<text class="stat-value">{{ userStats.active }}</text>
						</view>
					</view>
				</view>

				<!-- 任务数据分析 -->
				<view class="chart-panel">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-renwu panel-icon"></text>
							<text>任务数据分析</text>
						</view>
						<view class="panel-tabs">
							<text class="tab-item" :class="{ active: taskActiveTab === 'volume' }" @click="switchTaskTab('volume')">发布量</text>
							<text class="tab-item" :class="{ active: taskActiveTab === 'completion' }" @click="switchTaskTab('completion')">完成率</text>
							<text class="tab-item" :class="{ active: taskActiveTab === 'category' }" @click="switchTaskTab('category')">分类</text>
						</view>
					</view>
					<view class="chart-container">
						<QiunDataCharts 
							:type="taskChartType" 
							:opts="taskChartOpts"
							:chartData="taskChartData"
							:loadingType="1"
							background="transparent"
							canvas2dH5="true"
							:canvas2dH5Width="600"
							:canvas2dH5Height="400"
						/>
					</view>
					<view class="chart-stats">
						<view class="stat-item">
							<text class="stat-label">总任务数</text>
							<text class="stat-value">{{ taskStats.total }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">已完成</text>
							<text class="stat-value">{{ taskStats.completed }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">完成率</text>
							<text class="stat-value">{{ taskStats.completionRate }}%</text>
						</view>
					</view>
				</view>

				<!-- 交易数据分析 -->
				<view class="chart-panel">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-jiaoyi panel-icon"></text>
							<text>交易数据分析</text>
						</view>
						<view class="panel-tabs">
							<text class="tab-item" :class="{ active: tradeActiveTab === 'amount' }" @click="switchTradeTab('amount')">交易额</text>
							<text class="tab-item" :class="{ active: tradeActiveTab === 'volume' }" @click="switchTradeTab('volume')">交易量</text>
							<text class="tab-item" :class="{ active: tradeActiveTab === 'habit' }" @click="switchTradeTab('habit')">消费习惯</text>
						</view>
					</view>
					<view class="chart-container">
						<QiunDataCharts 
							:type="tradeChartType" 
							:opts="tradeChartOpts"
							:chartData="tradeChartData"
							:loadingType="1"
							background="transparent"
							canvas2dH5="true"
							:canvas2dH5Width="600"
							:canvas2dH5Height="400"
						/>
					</view>
					<view class="chart-stats">
						<view class="stat-item">
							<text class="stat-label">总交易额</text>
							<text class="stat-value">¥{{ tradeStats.totalAmount }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">交易笔数</text>
							<text class="stat-value">{{ tradeStats.totalCount }}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">平均客单</text>
							<text class="stat-value">¥{{ tradeStats.avgAmount }}</text>
						</view>
					</view>
				</view>

				<!-- 风险监控面板 -->
				<view class="risk-panel">
					<view class="panel-header">
						<view class="panel-title">
							<text class="iconfont icon-jinggao panel-icon risk-icon"></text>
							<text>风险数据监控</text>
							<view class="help-link" @click="showRiskRulesModal">
								<view class="help-btn">
									<text class="iconfont icon-wenhao"></text>
								</view>
								<text class="help-text">查看监控规则</text>
							</view>
						</view>
						<view class="risk-level" :class="riskLevel.class">
							<text class="risk-dot"></text>
							<text class="risk-text">{{ riskLevel.text }}</text>
						</view>
					</view>
					
					<view class="risk-metrics">
						<view class="risk-metric-card">
							<view class="risk-metric-header">
								<text class="risk-metric-title">高违约率任务类型</text>
								<text class="risk-metric-count">{{ riskData.highDefaultTasks.length }}</text>
							</view>
							<view class="risk-list">
								<view 
									class="risk-item risk-user-item" 
									v-for="item in riskData.highDefaultTasks" 
									:key="item.type"
									@click="viewTaskDetail(item)"
								>
									<view class="risk-user-content">
										<view class="risk-user-main">
											<text class="risk-item-name">{{ item.type }}</text>
											<text class="risk-user-level" :class="getTaskRiskLevel(item.rate)">
												{{ getTaskRiskText(item.rate) }}
											</text>
										</view>
										<view class="risk-user-meta">
											<text class="risk-item-count">违约率{{ item.rate }}%</text>
											<text class="risk-user-tip">点击查看详情</text>
										</view>
									</view>
									<text class="risk-item-arrow iconfont icon-youjiantou"></text>
								</view>
							</view>
						</view>

						<view class="risk-metric-card">
							<view class="risk-metric-header">
								<text class="risk-metric-title">频繁违规用户</text>
								<text class="risk-metric-count">{{ riskData.violationUsers.length }}</text>
							</view>
							<view class="risk-list">
								<view 
									class="risk-item risk-user-item" 
									v-for="user in riskData.violationUsers" 
									:key="user.id"
									@click="viewUserDetail(user)"
								>
									<view class="risk-user-content">
										<view class="risk-user-main">
											<text class="risk-item-name">{{ user.nickname }}</text>
											<text class="risk-user-level" :class="getUserRiskLevel(user.violationCount)">
												{{ getUserRiskText(user.violationCount) }}
											</text>
										</view>
										<view class="risk-user-meta">
											<text class="risk-item-count">违规{{ user.violationCount }}次</text>
											<text class="risk-user-tip">点击查看详情</text>
										</view>
									</view>
									<text class="risk-item-arrow iconfont icon-youjiantou"></text>
								</view>
							</view>
						</view>

						<view class="risk-metric-card">
							<view class="risk-metric-header">
								<text class="risk-metric-title">异常交易监控</text>
								<text class="risk-metric-count">{{ riskData.abnormalTransactions.length }}</text>
							</view>
							<view class="risk-list">
								<view 
									class="risk-item risk-user-item" 
									v-for="transaction in riskData.abnormalTransactions" 
									:key="transaction.id"
									@click="viewTransactionDetail(transaction)"
								>
									<view class="risk-user-content">
										<view class="risk-user-main">
											<text class="risk-item-name">{{ transaction.description }}</text>
											<text class="risk-user-level" :class="transaction.level">
												{{ transaction.levelText }}
											</text>
										</view>
										<view class="risk-user-meta">
											<text class="risk-item-count">异常交易</text>
											<text class="risk-user-tip">点击查看详情</text>
										</view>
									</view>
									<text class="risk-item-arrow iconfont icon-youjiantou"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 数据洞察面板 -->
			<view class="insights-panel">
				<view class="insights-header">
					<view class="insights-title">
						<text class="iconfont icon-bulb"></text>
						<text>数据洞察</text>
					</view>
					<text class="insights-badge">{{ insights.length }}条建议</text>
				</view>
				<view class="insights-list">
					<view class="insight-item" v-for="(insight, index) in insights" :key="index" :class="insight.type">
						<view class="insight-icon">
							<text class="iconfont" :class="insight.icon"></text>
						</view>
						<view class="insight-content">
							<text class="insight-title">{{ insight.title }}</text>
							<text class="insight-desc">{{ insight.description }}</text>
						</view>
						<view class="insight-action" @click="handleInsightAction(insight)">
							<text>查看详情</text>
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
				</view>
			</view>

			<!-- 风险监控规则弹窗 -->
			<view class="modal-overlay" v-if="showRiskRulesPopup" @click="closeRiskRulesModal">
				<view class="modal-content" @click.stop>
					<view class="modal-header">
						<text class="modal-title">风险监控规则说明</text>
						<view class="modal-close" @click="closeRiskRulesModal">
							<text class="iconfont icon-guanbi"></text>
						</view>
					</view>
					<view class="modal-body">
						<view class="rule-section">
							<view class="rule-title">
								<text class="rule-text">1. 高违约率任务类型监控</text>
							</view>
						<view class="rule-desc">
							<text class="rule-label">判断标准：</text>
							<text>1.违约率 大于等于 10%：标记为高风险任务类型</text>
							<text>2.违约率 5%-10%：标记为中风险任务类型</text>
							<text>3.违约率 小于 5%：正常任务类型</text>
						</view>
							<view class="rule-desc">
								<text class="rule-label">监控内容：</text>
								<text>1.统计各类型任务的取消率、超时率</text>
								<text>2.分析任务类型的完成情况</text>
								<text>3.识别高风险任务分类</text>
							</view>
						</view>

						<view class="rule-section">
							<view class="rule-title">
								<text class="rule-text">2. 频繁违规用户监控</text>
							</view>
						<view class="rule-desc">
							<text class="rule-label">判断标准：</text>
							<text>1.30天内违规次数 大于等于 5次：高风险用户</text>
							<text>2.30天内违规次数 3-4次：中风险用户</text>
							<text>3.30天内违规次数 小于 3次：正常用户</text>
						</view>
							<view class="rule-desc">
								<text class="rule-label">违规行为包括：</text>
								<text>1.恶意取消任务</text>
								<text>2.虚假交易行为</text>
								<text>3.违反平台规则</text>
								<text>4.收到多次投诉</text>
							</view>
						</view>

						<view class="rule-section">
							<view class="rule-title">
								<text class="rule-text">3. 异常交易监控</text>
							</view>
							<view class="rule-desc">
								<text class="rule-label">高风险异常：</text>
								<text>1.短时间内大量低价发布（1小时内发布5个以上低于市场价30%的任务）</text>
								<text>2.异常退款申请（24小时内申请3次以上退款）</text>
							</view>
							<view class="rule-desc">
								<text class="rule-label">中风险异常：</text>
								<text>1.可疑账户关联（多个账户使用相同设备/IP）</text>
								<text>2.重复任务发布（相同内容重复发布3次以上）</text>
							</view>
							<view class="rule-desc">
								<text class="rule-label">低风险异常：</text>
								<text>1.价格波动异常</text>
								<text>2.交易时间异常</text>
							</view>
						</view>

						<view class="rule-section">
							<view class="rule-title">
								<text class="rule-text">4. 风险等级计算</text>
							</view>
							<view class="rule-desc">
								<text class="rule-label">整体风险评估：</text>
								<text>1.高风险：存在2个以上高风险指标</text>
								<text>2.中风险：存在1个高风险指标或3个以上中风险指标</text>
								<text>3.低风险：所有指标正常</text>
							</view>
						</view>

						<view class="rule-footer">
							<text class="footer-note">系统每小时自动更新风险数据,管理员应定期关注并及时处理高风险事项</text>
						</view>
					</view>
					<view class="modal-actions">
						<button class="modal-btn primary" @click="closeRiskRulesModal">我知道了</button>
					</view>
				</view>
			</view>

			<!-- 任务详情弹窗 -->
			<view class="modal-overlay" v-if="showTaskDetailModal" @click="closeTaskDetailModal">
				<view class="task-detail-modal" @click.stop>
					<view class="modal-header">
						<view class="modal-header-left">
							<text class="modal-title">任务类型风险详情</text>
							<view class="task-risk-badge" :class="getTaskRiskLevel(selectedTask?.rate || 0)">
								<text class="iconfont icon-jinggao"></text>
								<text>{{ getTaskRiskText(selectedTask?.rate || 0) }}</text>
							</view>
						</view>
						<view class="modal-close" @click="closeTaskDetailModal">
							<text class="iconfont icon-guanbi"></text>
						</view>
					</view>
					
					<view class="modal-body" v-if="selectedTask">
						<!-- 基本信息 -->
						<view class="info-section">
							<view class="section-title">
								<text class="iconfont icon-renwu"></text>
								<text>基本信息</text>
							</view>
							<view class="info-grid">
								<view class="info-item">
									<text class="info-label">任务类型</text>
									<text class="info-value">{{ selectedTask.type }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">违约率</text>
									<text class="info-value" style="color: #e53e3e; font-weight: 700;">{{ selectedTask.rate }}%</text>
								</view>
								<view class="info-item">
									<text class="info-label">总任务数</text>
									<text class="info-value">{{ selectedTask.total }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">已完成</text>
									<text class="info-value" style="color: #38a169;">{{ selectedTask.completed }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">已取消</text>
									<text class="info-value" style="color: #e53e3e;">{{ selectedTask.cancelled }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">风险等级</text>
									<text class="info-value status" :class="getTaskRiskLevel(selectedTask.rate)">
										{{ getTaskRiskText(selectedTask.rate) }}
									</text>
								</view>
							</view>
						</view>
						
						<!-- 风险分析 -->
						<view class="info-section">
							<view class="section-title">
								<text class="iconfont icon-fenxi"></text>
								<text>风险分析</text>
							</view>
							<view class="risk-analysis-box">
								<view class="analysis-chart">
									<view class="chart-bar">
										<view class="bar-item">
											<text class="bar-label">完成</text>
											<view class="bar-bg">
												<view class="bar-fill success" :style="{ width: (selectedTask.completed / selectedTask.total * 100) + '%' }"></view>
											</view>
											<text class="bar-value">{{ selectedTask.completed }}</text>
										</view>
										<view class="bar-item">
											<text class="bar-label">取消</text>
											<view class="bar-bg">
												<view class="bar-fill danger" :style="{ width: (selectedTask.cancelled / selectedTask.total * 100) + '%' }"></view>
											</view>
											<text class="bar-value">{{ selectedTask.cancelled }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						
						<!-- 处理建议 -->
						<view class="info-section">
							<view class="section-title">
								<text class="iconfont icon-tishi"></text>
								<text>处理建议</text>
							</view>
							<view class="advice-box" :class="getTaskRiskLevel(selectedTask.rate)">
								<view class="advice-icon">
									<text class="iconfont icon-bulb"></text>
								</view>
								<view class="advice-content">
									<text class="advice-text">{{ getTaskAdvice(selectedTask.rate) }}</text>
								</view>
							</view>
						</view>
					</view>
					
					<view class="modal-actions">
						<button class="modal-btn secondary" @click="closeTaskDetailModal">关闭</button>
					</view>
				</view>
			</view>

			<!-- 交易异常详情弹窗 -->
			<view class="modal-overlay" v-if="showTransactionDetailModal" @click="closeTransactionDetailModal">
				<view class="transaction-detail-modal" @click.stop>
					<view class="modal-header">
						<view class="modal-header-left">
							<text class="modal-title">异常交易详情</text>
							<view class="transaction-risk-badge" :class="selectedTransaction?.level || 'low'">
								<text class="iconfont icon-jinggao"></text>
								<text>{{ selectedTransaction?.levelText || '低风险' }}</text>
							</view>
						</view>
						<view class="modal-close" @click="closeTransactionDetailModal">
							<text class="iconfont icon-guanbi"></text>
						</view>
					</view>
					
					<view class="modal-body" v-if="selectedTransaction">
						<!-- 异常信息 -->
						<view class="info-section">
							<view class="section-title">
								<text class="iconfont icon-jiaoyi"></text>
								<text>异常信息</text>
							</view>
							<view class="info-grid">
								<view class="info-item full-width">
									<text class="info-label">异常描述</text>
									<text class="info-value">{{ selectedTransaction.description }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">风险等级</text>
									<text class="info-value status" :class="selectedTransaction.level">
										{{ selectedTransaction.levelText }}
									</text>
								</view>
								<view class="info-item">
									<text class="info-label">检测时间</text>
									<text class="info-value">{{ formatDateTime(selectedTransaction.detectTime || Date.now()) }}</text>
								</view>
								<view class="info-item" v-if="selectedTransaction.userId">
									<text class="info-label">涉及用户</text>
									<text class="info-value">{{ selectedTransaction.userId }}</text>
								</view>
								<view class="info-item" v-if="selectedTransaction.amount">
									<text class="info-label">涉及金额</text>
									<text class="info-value" style="color: #e53e3e; font-weight: 700;">¥{{ selectedTransaction.amount }}</text>
								</view>
							</view>
						</view>
						
						<!-- 风险指标 -->
						<view class="info-section">
							<view class="section-title">
								<text class="iconfont icon-zhibiao"></text>
								<text>风险指标</text>
							</view>
							<view class="risk-indicators">
								<view class="indicator-item" :class="selectedTransaction.level">
									<view class="indicator-header">
										<text class="indicator-icon iconfont icon-jinggao"></text>
										<text class="indicator-title">威胁程度</text>
									</view>
									<view class="indicator-bar">
										<view class="indicator-fill" :style="{ width: getTransactionRiskPercent(selectedTransaction.level) + '%' }"></view>
									</view>
									<text class="indicator-value">{{ selectedTransaction.levelText }}</text>
								</view>
								<view class="indicator-item" :class="getUrgencyLevel(selectedTransaction.level)">
									<view class="indicator-header">
										<text class="indicator-icon iconfont icon-shijian"></text>
										<text class="indicator-title">处理紧急度</text>
									</view>
									<view class="indicator-bar">
										<view class="indicator-fill" :style="{ width: getUrgencyPercent(selectedTransaction.level) + '%' }"></view>
									</view>
									<text class="indicator-value">{{ getUrgencyText(selectedTransaction.level) }}</text>
								</view>
							</view>
						</view>
						
						<!-- 处理建议 -->
						<view class="info-section">
							<view class="section-title">
								<text class="iconfont icon-tishi"></text>
								<text>处理建议</text>
							</view>
							<view class="advice-box" :class="selectedTransaction.level">
								<view class="advice-icon">
									<text class="iconfont icon-bulb"></text>
								</view>
								<view class="advice-content">
									<text class="advice-text">{{ getTransactionAdvice(selectedTransaction.level) }}</text>
									<view class="advice-steps">
										<text class="step-title">建议操作步骤：</text>
										<text class="step-item" v-for="(step, index) in getTransactionSteps(selectedTransaction.level)" :key="index">
											{{ index + 1 }}. {{ step }}
										</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="modal-actions">
						<button class="modal-btn secondary" @click="closeTransactionDetailModal">关闭</button>
						<button class="modal-btn primary" @click="handleTransaction">立即处理</button>
					</view>
				</view>
			</view>

			<!-- 用户详情弹窗 -->
			<view class="modal-overlay" v-if="showUserDetailModal" @click="closeUserDetailModal">
				<view class="user-detail-modal" @click.stop>
					<view class="modal-header">
						<view class="modal-header-left">
							<text class="modal-title">用户详细信息</text>
							<view class="user-risk-badge" :class="getUserRiskLevel(selectedUser?.violationCount || 0)">
								<text class="iconfont icon-jinggao"></text>
								<text>{{ getUserRiskText(selectedUser?.violationCount || 0) }}</text>
							</view>
						</view>
						<view class="modal-close" @click="closeUserDetailModal">
							<text class="iconfont icon-guanbi"></text>
						</view>
					</view>
					
					<view class="modal-body" v-if="selectedUser">
						<!-- 基本信息 -->
						<view class="info-section">
							<view class="section-title">
								<text class="iconfont icon-yonghu"></text>
								<text>基本信息</text>
							</view>
							<view class="info-grid">
								<view class="info-item">
									<text class="info-label">用户ID</text>
									<text class="info-value">{{ selectedUser._id || selectedUser.id || '-' }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">用户名</text>
									<text class="info-value">{{ selectedUser.username || '-' }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">昵称</text>
									<text class="info-value">{{ selectedUser.nickname || '-' }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">账号状态</text>
									<text class="info-value status" :class="{ active: selectedUser.status === 0, disabled: selectedUser.status !== 0 }">
										{{ selectedUser.status === 0 ? '正常' : '已禁用' }}
									</text>
								</view>
								<view class="info-item">
									<text class="info-label">手机号</text>
									<text class="info-value">{{ selectedUser.mobile || '未绑定' }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">邮箱</text>
									<text class="info-value">{{ selectedUser.email || '未绑定' }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">注册时间</text>
									<text class="info-value">{{ formatDateTime(selectedUser.create_date) }}</text>
								</view>
								<view class="info-item">
									<text class="info-label">最后登录</text>
									<text class="info-value">{{ formatDateTime(selectedUser.last_login_date) }}</text>
								</view>
							</view>
						</view>
						
						<!-- 违规统计 -->
						<view class="info-section">
							<view class="section-title">
								<text class="iconfont icon-jinggao"></text>
								<text>违规统计</text>
							</view>
							<view class="violation-stats">
								<view class="stat-box">
									<text class="stat-number">{{ selectedUser.violationCount || selectedUser.violation_count || 0 }}</text>
									<text class="stat-label">违规次数</text>
								</view>
								<view class="stat-box">
									<text class="stat-number risk" :class="getUserRiskLevel(selectedUser.violationCount || selectedUser.violation_count || 0)">
										{{ getUserRiskText(selectedUser.violationCount || selectedUser.violation_count || 0) }}
									</text>
									<text class="stat-label">风险等级</text>
								</view>
								<view class="stat-box">
									<text class="stat-number">{{ (selectedUser.violation_records || []).length }}</text>
									<text class="stat-label">违规记录</text>
								</view>
							</view>
						</view>
						
						<!-- 违规记录详情 -->
						<view class="info-section">
							<view class="section-title">
								<text class="iconfont icon-liebiao"></text>
								<text>违规记录详情</text>
							</view>
							<view class="violation-records" v-if="selectedUser.violation_records && selectedUser.violation_records.length > 0">
								<view class="record-item" v-for="(record, index) in selectedUser.violation_records" :key="index">
									<view class="record-header">
										<view class="record-index">{{ index + 1 }}</view>
										<view class="record-type">{{ record.type }}</view>
										<view class="record-time">{{ formatDateTime(record.mark_time) }}</view>
									</view>
									<view class="record-content">
										<view class="record-row">
											<text class="record-label">违规原因：</text>
											<text class="record-text">{{ record.reason || '无' }}</text>
										</view>
										<view class="record-row">
											<text class="record-label">标记人：</text>
											<text class="record-text">{{ record.marker || '系统' }}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="no-records" v-else>
								<text class="iconfont icon-kongbai"></text>
								<text>暂无违规记录</text>
							</view>
						</view>
					</view>
					
					<view class="modal-actions">
						<button class="modal-btn secondary" @click="closeUserDetailModal">关闭</button>
					</view>
				</view>
			</view>

		</view>
	</AdminLayout>
</template>

<script>
import AdminLayout from '@/components/AdminLayout.vue'
import QiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'

export default {
	components: { 
		AdminLayout,
		QiunDataCharts
	},
	data() {
		return {
			month: '',
			minDate: '2025-09', // 最小可选日期
			maxDate: '', // 最大可选日期（今天）
			monthOptions: [], // 可选的月份列表
			loading: false,
			useRealData: false, // 是否使用真实数据
			lastUpdateTime: '', // 最后更新时间
			quickFilter: '', // 快速筛选
			showRiskRulesPopup: false, // 是否显示风险规则弹窗
			
			// 数据洞察
			insights: [
				{
					type: 'success',
					icon: 'icon-chenggong',
					title: '用户增长稳定',
					description: '本月用户增长率达12.5%，保持良好增长态势',
					action: 'user'
				},
				{
					type: 'warning',
					icon: 'icon-jinggao',
					title: '任务完成率下降',
					description: '对比上月，任务完成率下降3.2%，建议优化任务分配',
					action: 'task'
				},
				{
					type: 'info',
					icon: 'icon-tishi',
					title: '高峰时段集中',
					description: '12-18点交易量占比48%，建议增加该时段运营投入',
					action: 'trade'
				}
			],
			
			// 用户详情弹窗
			showUserDetailModal: false,
			selectedUser: null,
			
			// 任务详情弹窗
			showTaskDetailModal: false,
			selectedTask: null,
			
			// 交易异常详情弹窗
			showTransactionDetailModal: false,
			selectedTransaction: null,
			
			// 核心指标数据
			overviewMetrics: [
				{ label: '总用户数', value: '0', trend: 0, color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', icon: 'icon-yonghu' },
				{ label: '活跃任务', value: '0', trend: 0, color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', icon: 'icon-renwu' },
				{ label: '交易金额', value: '¥0', trend: 0, color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', icon: 'icon-jiaoyi' },
				{ label: '风险指数', value: '低', trend: 0, color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', icon: 'icon-anquan' }
			],
			
			// 用户数据
			userActiveTab: 'growth',
			userStats: {
				total: 0,
				monthlyNew: 0,
				active: 0
			},
			userChartData: {},
			userChartOpts: {},
			
			// 任务数据
			taskActiveTab: 'volume',
			taskStats: {
				total: 0,
				completed: 0,
				completionRate: 0
			},
			taskChartData: {},
			taskChartOpts: {},
			
			// 交易数据
			tradeActiveTab: 'amount',
			tradeStats: {
				totalAmount: '0.00',
				totalCount: 0,
				avgAmount: '0.00'
			},
			tradeChartData: {},
			tradeChartOpts: {},
			
			// 风险数据
			riskLevel: {
				text: '低风险',
				class: 'low'
			},
			riskData: {
				highDefaultTasks: [],
				violationUsers: [],
				abnormalTransactions: []
			},
			
		// 真实数据存储
		realUserGrowthData: null,
		realTaskVolumeData: null,
		realTaskCompletionData: null,
		realTaskCategoryData: null,
		realTradeChartData: null,
		realTradeHabitData: null
		}
	},
	
	computed: {
		// 获取任务图表类型
		taskChartType() {
			if (this.taskActiveTab === 'completion') {
				return 'line'
			} else {
				return 'column'
			}
		},
		
		// 获取交易图表类型
		tradeChartType() {
			if (this.tradeActiveTab === 'amount') {
				return 'area'
			} else if (this.tradeActiveTab === 'volume') {
				return 'line'
			} else {
				return 'column'
			}
		}
	},
	
	onReady() {
		// 设置最大可选日期为今天
		const today = new Date()
		const year = today.getFullYear()
		const month = String(today.getMonth() + 1).padStart(2, '0')
		this.maxDate = `${year}-${month}`
		
		// 生成可选月份列表（从2020-01到当前月份）
		this.generateMonthOptions()
		
		// 更新时间
		this.updateLastUpdateTime()
		
		this.loadAllData()
	},
	
	
	methods: {
		// 更新最后更新时间
		updateLastUpdateTime() {
			const now = new Date()
			const year = now.getFullYear()
			const month = String(now.getMonth() + 1).padStart(2, '0')
			const day = String(now.getDate()).padStart(2, '0')
			const hours = String(now.getHours()).padStart(2, '0')
			const minutes = String(now.getMinutes()).padStart(2, '0')
			this.lastUpdateTime = `${year}-${month}-${day} ${hours}:${minutes}`
		},
		
		// 快速筛选
		setQuickFilter(filter) {
			this.quickFilter = filter
			const today = new Date()
			
			switch(filter) {
				case 'today':
					// 设置为今天
					this.month = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`
					break
				case 'week':
					// 设置为本周（本月）
					this.month = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`
					break
				case 'month':
					// 设置为本月
					this.month = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`
					break
			}
			
			uni.showToast({
				title: `已切换到${filter === 'today' ? '今日' : filter === 'week' ? '本周' : '本月'}数据`,
				icon: 'success',
				duration: 1500
			})
			
			this.loadAllData()
		},
		
		// 导出报告
		exportReport() {
			uni.showModal({
				title: '导出报告',
				content: '是否导出当前数据分析报告？\n\n报告将包含：\n· 核心指标数据\n· 用户增长趋势\n· 任务完成情况\n· 交易数据分析\n· 风险监控数据',
				confirmText: '导出Excel',
				cancelText: '导出PDF',
				success: (res) => {
					if (res.confirm) {
						this.exportToExcel()
					} else if (res.cancel) {
						this.exportToPDF()
					}
				}
			})
		},
		
		// 导出Excel
		exportToExcel() {
			uni.showToast({
				title: '正在生成Excel报告...',
				icon: 'loading',
				duration: 2000
			})
			
			// 模拟导出过程
			setTimeout(() => {
				uni.showToast({
					title: 'Excel报告已生成',
					icon: 'success',
					duration: 2000
				})
			}, 2000)
		},
		
		// 导出PDF
		exportToPDF() {
			uni.showToast({
				title: '正在生成PDF报告...',
				icon: 'loading',
				duration: 2000
			})
			
			// 模拟导出过程
			setTimeout(() => {
				uni.showToast({
					title: 'PDF报告已生成',
					icon: 'success',
					duration: 2000
				})
			}, 2000)
		},
		
		// 处理洞察建议
		handleInsightAction(insight) {
			uni.showModal({
				title: insight.title,
				content: insight.description + '\n\n是否跳转到相关页面查看详情？',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '功能开发中...',
							icon: 'none'
						})
					}
				}
			})
		},
		
		// 显示风险规则弹窗
		showRiskRulesModal() {
			this.showRiskRulesPopup = true
		},
		
		// 关闭风险规则弹窗
		closeRiskRulesModal() {
			this.showRiskRulesPopup = false
		},
		
		// 查看用户详情
		async viewUserDetail(user) {
			console.log('查看用户详情:', user)
			
			try {
				// 加载完整的用户信息
				uni.showLoading({ title: '加载中...' })
				
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'getUserDetail',
						userId: user.id
					}
				})
				
				uni.hideLoading()
				
				if (res.result && res.result.code === 0) {
					this.selectedUser = res.result.data
					this.showUserDetailModal = true
				} else {
					// 如果云函数不支持getUserDetail，使用现有数据
					this.selectedUser = {
						...user,
						username: user.nickname.replace('***', ''),
						create_date: Date.now() - 30 * 24 * 60 * 60 * 1000, // 模拟创建时间
						last_login_date: Date.now() - 2 * 24 * 60 * 60 * 1000, // 模拟最后登录
						status: 0,
						violation_records: this.generateMockViolationRecords(user.violationCount)
					}
					this.showUserDetailModal = true
				}
			} catch (error) {
				uni.hideLoading()
				console.error('获取用户详情失败:', error)
				
				// 使用现有数据显示弹窗
				this.selectedUser = {
					...user,
					username: user.nickname.replace('***', ''),
					create_date: Date.now() - 30 * 24 * 60 * 60 * 1000,
					last_login_date: Date.now() - 2 * 24 * 60 * 60 * 1000,
					status: 0,
					violation_records: this.generateMockViolationRecords(user.violationCount)
				}
				this.showUserDetailModal = true
			}
		},
		
		// 生成模拟违规记录（如果没有真实数据）
		generateMockViolationRecords(count) {
			const types = ['恶意取消任务', '虚假交易行为', '违反平台规则', '收到多次投诉']
			const records = []
			const now = Date.now()
			
			for (let i = 0; i < count; i++) {
				records.push({
					type: types[Math.floor(Math.random() * types.length)],
					reason: '系统自动检测到违规行为',
					mark_time: now - (count - i) * 5 * 24 * 60 * 60 * 1000, // 每5天一次
					marker: 'system'
				})
			}
			
			return records
		},
		
		// 关闭用户详情弹窗
		closeUserDetailModal() {
			this.showUserDetailModal = false
			this.selectedUser = null
		},
		
		// 格式化时间
		formatDateTime(timestamp) {
			if (!timestamp) return '-'
			const date = new Date(timestamp)
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const hours = String(date.getHours()).padStart(2, '0')
			const minutes = String(date.getMinutes()).padStart(2, '0')
			return `${year}-${month}-${day} ${hours}:${minutes}`
		},
		
		// 获取用户风险等级文本
		getUserRiskText(violationCount) {
			if (violationCount >= 5) return '高风险'
			if (violationCount >= 3) return '中风险'
			return '低风险'
		},
		
		// 获取用户风险等级样式类
		getUserRiskLevel(violationCount) {
			if (violationCount >= 5) return 'high'
			if (violationCount >= 3) return 'medium'
			return 'low'
		},
		
		// 获取任务风险等级文本
		getTaskRiskText(rate) {
			if (rate >= 10) return '高风险'
			if (rate >= 5) return '中风险'
			return '低风险'
		},
		
		// 获取任务风险等级样式类
		getTaskRiskLevel(rate) {
			if (rate >= 10) return 'high'
			if (rate >= 5) return 'medium'
			return 'low'
		},
		
		// 查看任务详情
		viewTaskDetail(task) {
			console.log('查看任务详情:', task)
			this.selectedTask = task
			this.showTaskDetailModal = true
		},
		
		// 关闭任务详情弹窗
		closeTaskDetailModal() {
			this.showTaskDetailModal = false
			this.selectedTask = null
		},
		
		// 获取任务建议
		getTaskAdvice(rate) {
			if (rate >= 10) {
				return '该任务类型违约率过高，建议加强审核和监管，考虑调整任务规则或提高保证金。'
			} else if (rate >= 5) {
				return '该任务类型存在一定风险，建议关注任务进度，及时介入处理异常情况。'
			} else {
				return '该任务类型运行正常，继续保持良好的管理和监督。'
			}
		},
		
		// 查看交易详情
		viewTransactionDetail(transaction) {
			console.log('查看交易详情:', transaction)
			this.selectedTransaction = transaction
			this.showTransactionDetailModal = true
		},
		
		// 关闭交易详情弹窗
		closeTransactionDetailModal() {
			this.showTransactionDetailModal = false
			this.selectedTransaction = null
		},
		
		// 处理交易异常
		handleTransaction() {
			uni.showModal({
				title: '处理异常交易',
				content: '确定要处理这个异常交易吗？\n\n处理后将标记为已处理状态，并通知相关用户。',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '处理成功',
							icon: 'success',
							duration: 2000
						})
						this.closeTransactionDetailModal()
					}
				}
			})
		},
		
		// 获取交易风险百分比
		getTransactionRiskPercent(level) {
			if (level === 'high') return 90
			if (level === 'medium') return 60
			return 30
		},
		
		// 获取紧急度等级
		getUrgencyLevel(level) {
			return level // 使用相同的等级
		},
		
		// 获取紧急度百分比
		getUrgencyPercent(level) {
			if (level === 'high') return 95
			if (level === 'medium') return 65
			return 35
		},
		
		// 获取紧急度文本
		getUrgencyText(level) {
			if (level === 'high') return '立即处理'
			if (level === 'medium') return '尽快处理'
			return '正常处理'
		},
		
		// 获取交易处理步骤
		getTransactionSteps(level) {
			if (level === 'high') {
				return [
					'立即冻结相关账户和交易',
					'联系涉及用户核实情况',
					'收集并保存相关证据',
					'向上级报告处理结果',
					'采取必要的补救措施'
				]
			} else if (level === 'medium') {
				return [
					'密切关注相关账户动态',
					'调查交易详细情况',
					'联系用户了解情况',
					'做好预警准备',
					'定期跟进处理进度'
				]
			} else {
				return [
					'持续观察相关交易',
					'记录异常情况',
					'建立监控档案',
					'定期复查评估'
				]
			}
		},
		
		// 获取交易建议
		getTransactionAdvice(level) {
			if (level === 'high') {
				return '检测到高风险异常交易，建议立即介入调查，必要时冻结相关账户或交易。'
			} else if (level === 'medium') {
				return '检测到中风险异常交易，建议密切关注相关账户动态，做好预警准备。'
			} else {
				return '检测到低风险异常，建议持续观察，做好记录备案。'
			}
		},
		
		// 根据选择的月份生成日期范围
		generateDateRange() {
			if (!this.month) {
				// 如果没有选择月份，返回最近7天
				const dates = []
				const today = new Date()
				for (let i = 6; i >= 0; i--) {
					const date = new Date(today)
					date.setDate(date.getDate() - i)
					const month = String(date.getMonth() + 1).padStart(2, '0')
					const day = String(date.getDate()).padStart(2, '0')
					dates.push(`${month}-${day}`)
				}
				return dates
			} else {
				// 如果选择了月份，返回该月的日期范围
				const [year, month] = this.month.split('-')
				const daysInMonth = new Date(year, month, 0).getDate()
				const dates = []
				
				// 根据月份天数，选择合适的采样间隔
				let step = 1
				if (daysInMonth > 20) {
					step = Math.ceil(daysInMonth / 7) // 大约显示7个点
				}
				
				for (let day = 1; day <= daysInMonth; day += step) {
					const dayStr = String(day).padStart(2, '0')
					dates.push(`${month}-${dayStr}`)
				}
				
				// 确保包含月末
				const lastDay = String(daysInMonth).padStart(2, '0')
				if (dates[dates.length - 1] !== `${month}-${lastDay}`) {
					dates.push(`${month}-${lastDay}`)
				}
				
				return dates
			}
		},
		
		// 生成可选月份列表（从2025-09到当前月份）
		generateMonthOptions() {
			const options = ['全部月份']
			const startYear = 2025
			const startMonth = 9
			
			// 解析当前年月
			const [endYear, endMonth] = this.maxDate.split('-').map(Number)
			
			// 生成月份列表
			for (let year = startYear; year <= endYear; year++) {
				const monthStart = (year === startYear) ? startMonth : 1
				const monthEnd = (year === endYear) ? endMonth : 12
				
				for (let month = monthStart; month <= monthEnd; month++) {
					const monthStr = String(month).padStart(2, '0')
					options.push(`${year}-${monthStr}`)
				}
			}
			
			this.monthOptions = options
		},
		
		// 处理月份选择器变化
		onMonthPickerChange(e) {
			const index = e.detail.value
			
			if (index === 0) {
				// 选择了"全部月份"
				this.month = ''
			} else {
				// 选择了具体月份
				this.month = this.monthOptions[index]
			}
			
			console.log('选择的月份:', this.month)
			this.loadAllData()
		},
		
		// 切换数据源
		toggleDataSource() {
			this.useRealData = !this.useRealData
			uni.showToast({
				title: `已切换到${this.useRealData ? '真实' : '模拟'}数据`,
				icon: 'success',
				duration: 1500
			})
			this.loadAllData()
		},
		
		// 切换用户图表tab
		switchUserTab(tab) {
			this.userActiveTab = tab
			this.setupUserChart()
		},
		
		// 切换任务图表tab
		switchTaskTab(tab) {
			this.taskActiveTab = tab
			this.setupTaskChart()
		},
		
		// 切换交易图表tab
		switchTradeTab(tab) {
			this.tradeActiveTab = tab
			this.setupTradeChart()
		},
		
		// 图表事件处理
		getUserChartIndex(e) {
			console.log('用户图表点击:', e);
		},
		
		getTaskChartIndex(e) {
			console.log('任务图表点击:', e);
		},
		
		getTradeChartIndex(e) {
			console.log('交易图表点击:', e);
		},
		
		
		async loadAllData() {
			this.loading = true
			try {
				await Promise.all([
					this.loadUserData(),
					this.loadTaskData(),
					this.loadTradeData(),
					this.loadRiskData()
				])
				this.updateOverviewMetrics()
				this.updateLastUpdateTime() // 更新时间
				this.$nextTick(() => {
					this.setupAllCharts()
					console.log('图表配置已加载:', {
						userChartOpts: this.userChartOpts,
						taskChartOpts: this.taskChartOpts,
						tradeChartOpts: this.tradeChartOpts
					})
				})
			} catch (error) {
				console.error('加载数据失败:', error)
				uni.showToast({
					title: '数据加载失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		//用户数据
		async loadUserData() {
			if (this.useRealData) {
				// 使用真实数据
				try {
					const result = await uniCloud.callFunction({
						name: 'getAnalyticsData',
						data: {
							dataType: 'user',
							month: this.month
						}
					})
					if (result.result.code === 200) {
						const data = result.result.data
						this.userStats = {
							total: data.total,
							monthlyNew: data.monthlyNew,
							active: data.active
						}
						// 保存真实的增长数据用于图表
						this.realUserGrowthData = data.growthData
					} else {
						throw new Error(result.result.message)
					}
				} catch (error) {
					console.error('获取用户数据失败:', error)
					uni.showToast({
						title: '获取用户数据失败，使用模拟数据',
						icon: 'none'
					})
					this.loadMockUserData()
				}
			} else {
				// 使用模拟数据
				this.loadMockUserData()
			}
		},
		
		// 加载模拟用户数据
		loadMockUserData() {
			this.userStats = { 
				total: 1424, 
				monthlyNew: 143, 
				active: 578 
			}
		},
		//任务数据
		async loadTaskData() {
			if (this.useRealData) {
				// 使用真实数据
				try {
					const result = await uniCloud.callFunction({
						name: 'getAnalyticsData',
						data: {
							dataType: 'task',
							month: this.month
						}
					})
					if (result.result.code === 200) {
						const data = result.result.data
						this.taskStats = {
							total: data.total,
							completed: data.completed,
							completionRate: data.completionRate
						}
						// 保存真实的任务量数据用于图表
						this.realTaskVolumeData = data.volumeData
						// 基于真实数据生成完成率数据
						this.realTaskCompletionData = data.volumeData.map(item => ({
							date: item.date,
							rate: item.published > 0 ? ((item.completed / item.published) * 100).toFixed(1) : 0
						}))
						// 生成模拟的任务分类数据（实际项目中应该从数据库获取）
						this.realTaskCategoryData = [
							{ category: '任务发布', count: Math.floor(data.total * 0.27) },
							{ category: '快速发布', count: Math.floor(data.total * 0.22) },
							{ category: '快递代取', count: Math.floor(data.total * 0.17) },
							{ category: '外卖代买', count: Math.floor(data.total * 0.14) },
							{ category: '跑腿服务', count: Math.floor(data.total * 0.12) },
							{ category: '其他任务', count: Math.floor(data.total * 0.08) }
						]
					} else {
						throw new Error(result.result.message)
					}
				} catch (error) {
					console.error('获取任务数据失败:', error)
					uni.showToast({
						title: '获取任务数据失败，使用模拟数据',
						icon: 'none'
					})
					this.loadMockTaskData()
				}
			} else {
				// 使用模拟数据
				this.loadMockTaskData()
			}
		},
		
		// 加载模拟任务数据
		loadMockTaskData() {
			this.taskStats = { 
				total: 128, 
				completed: 99, 
				completionRate: 77 
			}
		},
		//交易数据
		async loadTradeData() {
			if (this.useRealData) {
				// 使用真实数据
				try {
					const result = await uniCloud.callFunction({
						name: 'getAnalyticsData',
						data: {
							dataType: 'trade',
							month: this.month
						}
					})
					if (result.result.code === 200) {
						const data = result.result.data
						this.tradeStats = {
							totalAmount: data.totalAmount,
							totalCount: data.totalCount,
							avgAmount: data.avgAmount
						}
						// 保存真实的交易数据用于图表
						this.realTradeChartData = data.chartData
						// 基于真实数据生成消费习惯数据（按时间段统计）
						if (data.chartData && data.chartData.length > 0) {
							this.realTradeHabitData = [
								{ period: '0-6点', amount: Math.floor(data.totalAmount * 0.08), count: Math.floor(data.totalCount * 0.05) },
								{ period: '6-12点', amount: Math.floor(data.totalAmount * 0.25), count: Math.floor(data.totalCount * 0.22) },
								{ period: '12-18点', amount: Math.floor(data.totalAmount * 0.42), count: Math.floor(data.totalCount * 0.48) },
								{ period: '18-24点', amount: Math.floor(data.totalAmount * 0.25), count: Math.floor(data.totalCount * 0.25) }
							]
						}
					} else {
						throw new Error(result.result.message)
					}
				} catch (error) {
					console.error('获取交易数据失败:', error)
					uni.showToast({
						title: '获取交易数据失败，使用模拟数据',
						icon: 'none'
					})
					this.loadMockTradeData()
				}
			} else {
				// 使用模拟数据
				this.loadMockTradeData()
			}
		},
		
		// 加载模拟交易数据
		loadMockTradeData() {
			this.tradeStats = {
				totalAmount: '14,280.00',
				totalCount: 123,
				avgAmount: '116.10'
			}
		},
		
		async loadRiskData() {
			if (this.useRealData) {
				// 使用真实风险数据
				try {
					console.log('正在加载真实风险数据...')
					
					// 直接调用风险分析云函数
					const result = await uniCloud.callFunction({
						name: 'riskAnalysis',
						data: {
							analysisType: 'overview',
							timeRange: 30
						}
					})
					
					console.log('风险分析云函数返回结果:', result)
					
					if (result.result && result.result.code === 200) {
						this.riskData = result.result.data
						console.log('真实风险数据加载成功:', this.riskData)
						uni.showToast({
							title: '真实风险数据加载成功',
							icon: 'success',
							duration: 1500
						})
					} else {
						throw new Error(result.result?.message || '风险分析云函数调用失败')
					}
				} catch (error) {
					console.error('风险分析云函数调用失败:', error)
					
					// 尝试回退到 getAnalyticsData 云函数
					try {
						console.log('尝试使用 getAnalyticsData 获取风险数据...')
						const fallbackResult = await uniCloud.callFunction({
							name: 'getAnalyticsData',
							data: {
								dataType: 'risk',
								month: this.month
							}
						})
						
						if (fallbackResult.result && fallbackResult.result.code === 200) {
							this.riskData = fallbackResult.result.data
							console.log('备用风险数据加载成功:', this.riskData)
							uni.showToast({
								title: '备用真实数据加载成功',
								icon: 'success',
								duration: 1500
							})
						} else {
							throw new Error('备用云函数也调用失败')
						}
					} catch (fallbackError) {
						console.error('备用风险数据获取也失败:', fallbackError)
						uni.showToast({
							title: '真实数据获取失败，使用模拟数据',
							icon: 'none',
							duration: 2000
						})
						this.loadMockRiskData()
					}
				}
			} else {
				// 使用模拟数据
				console.log('使用模拟风险数据')
				this.loadMockRiskData()
			}
			
			// 计算风险等级
			this.calculateRiskLevel()
		},
		
		// 加载模拟风险数据
		loadMockRiskData() {
			this.riskData = {
				highDefaultTasks: [
					{ type: '外卖代拿', rate: 15.2, total: 16, cancelled: 2, completed: 13 },
					{ type: '快递代拿', rate: 8.7, total: 14, cancelled: 1, completed: 12 },
					{ type: '出二手物', rate: 6.3, total: 11, cancelled: 1, completed: 10 },
					{ type: '求购', rate: 4.1, total: 9, cancelled: 0, completed: 9 }
				],
				violationUsers: [
					{ id: 1, nickname: '用户***123', violationCount: 5 },
					{ id: 2, nickname: '用户***456', violationCount: 4 },
					{ id: 3, nickname: '用户***789', violationCount: 3 },
					{ id: 4, nickname: '用户***012', violationCount: 2 }
				],
				abnormalTransactions: [
					{ id: 1, description: '【模拟】短时间大量低价发布', level: 'high', levelText: '高风险' },
					{ id: 2, description: '【模拟】异常退款申请', level: 'medium', levelText: '中风险' },
					{ id: 3, description: '【模拟】可疑账户关联', level: 'low', levelText: '低风险' },
					{ id: 4, description: '【模拟】重复任务发布', level: 'medium', levelText: '中风险' }
				],
				overallRisk: { text: '低风险', class: 'low' },
				summary: {
					taskTypes: 4,
					violationUsers: 4,
					anomalies: 4,
					totalRisks: 12
				}
			}
		},
		
			// 计算风险等级
		calculateRiskLevel() {
			// 如果真实数据中包含整体风险等级，直接使用
			if (this.riskData.overallRisk) {
				this.riskLevel = this.riskData.overallRisk
				return
			}
			
			// 否则根据异常交易数量计算
			const highRiskCount = this.riskData.abnormalTransactions.filter(t => t.level === 'high').length
			if (highRiskCount > 2) {
				this.riskLevel = { text: '高风险', class: 'high' }
			} else if (highRiskCount > 0) {
				this.riskLevel = { text: '中风险', class: 'medium' }
			} else {
				this.riskLevel = { text: '低风险', class: 'low' }
			}
		},
		
		
		updateOverviewMetrics() {
			this.overviewMetrics[0].value = this.userStats.total.toLocaleString()
			this.overviewMetrics[0].trend = 12.5
			
			this.overviewMetrics[1].value = this.taskStats.total.toLocaleString()
			this.overviewMetrics[1].trend = 8.3
			
			this.overviewMetrics[2].value = `¥${this.tradeStats.totalAmount}`
			this.overviewMetrics[2].trend = 15.7
			
			this.overviewMetrics[3].value = this.riskLevel.text
			this.overviewMetrics[3].trend = -2.1
		},
		
		// 设置所有图表
		setupAllCharts() {
			this.setupUserChart()
			this.setupTaskChart()
			this.setupTradeChart()
		},
		
		// 配置用户图表
		setupUserChart() {
			// qiun-data-charts格式的数据配置
			this.userChartOpts = {
				color: ['#667eea', '#91CB74', '#FAC858'],
				padding: [15, 15, 0, 15],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: false
				},
				yAxis: {
					gridType: 'dash',
					dashLength: 2
				},
				extra: {
					line: {
						type: 'curve',
						width: 2,
						activeType: 'hollow'
					}
				}
			}
			
			// 根据当前选中的tab显示不同数据
			if (this.userActiveTab === 'growth') {
				// 用户增长数据
				if (this.useRealData && this.realUserGrowthData) {
					this.userChartData = {
						categories: this.realUserGrowthData.map(item => `09-${item.date}`),
						series: [{
							name: '用户数',
							data: this.realUserGrowthData.map(item => item.count)
						}]
					}
					} else {
					// 生成模拟数据，根据选择的月份动态生成
					const dates = this.generateDateRange()
					const baseValue = 1000
					const data = dates.map((date, index) => {
						return baseValue + (index * 50) + Math.floor(Math.random() * 40)
					})
					
					this.userChartData = {
						categories: dates,
						series: [{
							name: '用户数',
							data: data
						}]
					}
				}
			} else if (this.userActiveTab === 'active') {
				// 用户活跃度数据 - 也要动态生成
				const dates = this.generateDateRange()
				const baseDaily = 400
				const baseWeekly = 600
				
				const dailyData = dates.map((date, index) => {
					return baseDaily + (index * 20) + Math.floor(Math.random() * 30)
				})
				
				const weeklyData = dates.map((date, index) => {
					return baseWeekly + (index * 25) + Math.floor(Math.random() * 40)
				})
				
				this.userChartData = {
					categories: dates,
					series: [
						{
							name: '日活跃',
							data: dailyData
						},
						{
							name: '周活跃',
							data: weeklyData
						}
					]
				}
			}
		},
		
		// 配置任务图表
		setupTaskChart() {
			// 根据当前选中的tab显示不同数据和图表类型
			if (this.taskActiveTab === 'volume') {
				// 任务发布量 - 柱状图
				this.taskChartOpts = {
					color: ['#f093fb', '#4facfe'],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 2
					},
					extra: {
						column: {
							type: 'group',
							width: 30,
							activeBgColor: '#000000',
							activeBgOpacity: 0.08
						}
					}
				}
				
				if (this.useRealData && this.realTaskVolumeData) {
					this.taskChartData = {
						categories: this.realTaskVolumeData.map(item => `09-${item.date}`),
						series: [
							{
								name: '发布',
								data: this.realTaskVolumeData.map(item => item.published)
							},
							{
								name: '完成',
								data: this.realTaskVolumeData.map(item => item.completed)
							}
						]
					}
				} else {
					// 动态生成模拟数据
					const dates = this.generateDateRange()
					const publishedData = dates.map(() => 10 + Math.floor(Math.random() * 13))
					const completedData = publishedData.map(val => Math.floor(val * (0.7 + Math.random() * 0.2)))
					
					this.taskChartData = {
						categories: dates,
						series: [
							{
								name: '发布',
								data: publishedData
							},
							{
								name: '完成',
								data: completedData
							}
						]
					}
				}
			} else if (this.taskActiveTab === 'completion') {
				// 任务完成率 - 折线图
				this.taskChartOpts = {
					color: ['#4facfe', '#91CB74'],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: false
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 2
					},
					extra: {
						line: {
							type: 'curve',
							width: 2,
							activeType: 'hollow'
						}
					}
				}
				
				if (this.useRealData && this.realTaskCompletionData) {
					this.taskChartData = {
						categories: this.realTaskCompletionData.map(item => `09-${item.date}`),
						series: [{
							name: '完成率(%)',
							data: this.realTaskCompletionData.map(item => parseFloat(item.rate))
						}]
					}
				} else {
					// 动态生成模拟数据
					const dates = this.generateDateRange()
					const rateData = dates.map(() => 70 + Math.random() * 20)
					
					this.taskChartData = {
						categories: dates,
						series: [{
							name: '完成率(%)',
							data: rateData.map(val => parseFloat(val.toFixed(1)))
						}]
					}
				}
			} else if (this.taskActiveTab === 'category') {
				// 任务分类 - 饼图数据(用柱状图模拟)
				this.taskChartOpts = {
					color: ['#667eea', '#f093fb', '#4facfe', '#91CB74', '#FAC858'],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 2
					},
					extra: {
						column: {
							type: 'group',
							width: 30,
							activeBgColor: '#000000',
							activeBgOpacity: 0.08
						}
					}
				}
				
				if (this.useRealData && this.realTaskCategoryData) {
					this.taskChartData = {
						categories: this.realTaskCategoryData.map(item => item.category),
						series: [{
							name: '任务数量',
							data: this.realTaskCategoryData.map(item => item.count)
						}]
					}
				} else {
					this.taskChartData = {
						categories: ['任务发布', '快速发布', '快递代取', '外卖代买', '跑腿服务', '其他任务'],
						series: [{
							name: '任务数量',
							data: [35, 28, 22, 18, 15, 10]
						}]
					}
				}
			}
		},
		
		// 配置交易图表
		setupTradeChart() {
			// 根据当前选中的tab显示不同数据和图表类型
			if (this.tradeActiveTab === 'amount') {
				// 交易额 - 面积图
				this.tradeChartOpts = {
					color: ['#4facfe', '#91CB74'],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: false
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 2
					},
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: 'hollow'
						}
					}
				}
				
				if (this.useRealData && this.realTradeChartData && this.realTradeChartData.length > 0) {
					this.tradeChartData = {
						categories: this.realTradeChartData.map(item => `09-${item.date}`),
						series: [{
							name: '交易额',
							data: this.realTradeChartData.map(item => item.amount)
						}]
					}
				} else {
					// 动态生成模拟数据
					const dates = this.generateDateRange()
					const amountData = dates.map(() => 1000 + Math.floor(Math.random() * 1500))
					
					this.tradeChartData = {
						categories: dates,
						series: [{
							name: '交易额',
							data: amountData
						}]
					}
				}
			} else if (this.tradeActiveTab === 'volume') {
				// 交易量 - 折线图
				this.tradeChartOpts = {
					color: ['#667eea', '#f093fb'],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: false
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 2
					},
					extra: {
						line: {
							type: 'curve',
							width: 2,
							activeType: 'hollow'
						}
					}
				}
				
				if (this.useRealData && this.realTradeChartData && this.realTradeChartData.length > 0) {
					this.tradeChartData = {
						categories: this.realTradeChartData.map(item => `09-${item.date}`),
						series: [{
							name: '交易笔数',
							data: this.realTradeChartData.map(item => item.count)
						}]
					}
				} else {
					// 动态生成模拟数据
					const dates = this.generateDateRange()
					const countData = dates.map(() => 10 + Math.floor(Math.random() * 15))
					
					this.tradeChartData = {
						categories: dates,
						series: [{
							name: '交易笔数',
							data: countData
						}]
					}
				}
			} else if (this.tradeActiveTab === 'habit') {
				// 消费习惯 - 柱状图
				this.tradeChartOpts = {
					color: ['#FAC858', '#91CB74', '#4facfe', '#f093fb'],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 2
					},
					extra: {
						column: {
							type: 'group',
							width: 30,
							activeBgColor: '#000000',
							activeBgOpacity: 0.08
						}
					}
				}
				
				if (this.useRealData && this.realTradeHabitData) {
					this.tradeChartData = {
						categories: this.realTradeHabitData.map(item => item.period),
						series: [
							{
								name: '交易额',
								data: this.realTradeHabitData.map(item => item.amount)
							},
							{
								name: '交易量',
								data: this.realTradeHabitData.map(item => item.count)
							}
						]
					}
				} else {
					this.tradeChartData = {
						categories: ['0-6点', '6-12点', '12-18点', '18-24点'],
						series: [
							{
								name: '交易额',
								data: [600, 2900, 6300, 4480]
							},
							{
								name: '交易量',
								data: [4, 21, 53, 45]
							}
						]
					}
				}
			}
		},
		
	}
}
</script>

<style scoped>
/* 引入阿里图标字体 */
@import url('@/static/fonts/iconfont.css');

/* 主容器 */
.analytics-page {
	padding: 32rpx;
	background: #f8fafc;
	min-height: calc(100vh - 100rpx);
}

/* 顶部工具栏 */
.toolbar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 40rpx;
	padding: 32rpx;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
}

.toolbar-left {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.toolbar-left .page-header {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.last-update {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 24rpx;
	color: #a0aec0;
	padding: 8rpx 16rpx;
	background: #f7fafc;
	border-radius: 8rpx;
	width: fit-content;
}

.last-update .iconfont {
	font-size: 22rpx;
	color: #718096;
}

.page-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #1a202c;
	line-height: 1.2;
}

.page-subtitle {
	font-size: 28rpx;
	color: #718096;
	line-height: 1.4;
}

.toolbar-right {
	display: flex;
	align-items: center;
	gap: 16rpx;
	flex-wrap: wrap;
}

/* 快速筛选标签 */
.quick-filters {
	display: flex;
	gap: 8rpx;
	background: #f7fafc;
	padding: 6rpx;
	border-radius: 12rpx;
	border: 2rpx solid #e2e8f0;
}

.filter-tag {
	padding: 10rpx 20rpx;
	font-size: 24rpx;
	color: #718096;
	border-radius: 8rpx;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 500;
}

.filter-tag.active {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
}

.filter-tag:hover:not(.active) {
	background: #edf2f7;
}

.date-picker {
	cursor: pointer;
}

.picker-btn {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 16rpx 24rpx;
	background: #f7fafc;
	border: 2rpx solid #e2e8f0;
	border-radius: 16rpx;
	transition: all 0.3s ease;
	min-width: 200rpx;
	justify-content: center;
}

.picker-btn:hover {
	background: #edf2f7;
	border-color: #cbd5e0;
}

.picker-btn .iconfont {
	font-size: 28rpx;
	color: #4a5568;
}

.picker-text {
	font-size: 28rpx;
	color: #2d3748;
	font-weight: 500;
}

.export-btn {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 16rpx 32rpx;
	background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
	color: #fff;
	border: none;
	border-radius: 16rpx;
	font-size: 28rpx;
	font-weight: 600;
	transition: all 0.3s ease;
	box-shadow: 0 4rpx 15rpx rgba(72, 187, 120, 0.4);
}

.export-btn:hover {
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 20rpx rgba(72, 187, 120, 0.5);
}

.export-btn .iconfont {
	font-size: 28rpx;
}

.toggle-data-btn {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 16rpx 32rpx;
	background: #f7fafc;
	color: #4a5568;
	border: 2rpx solid #e2e8f0;
	border-radius: 16rpx;
	font-size: 28rpx;
	font-weight: 600;
	transition: all 0.3s ease;
	margin-right: 24rpx;
}

.toggle-data-btn.active {
	background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
	color: #fff;
	border-color: #38a169;
	box-shadow: 0 4rpx 15rpx rgba(72, 187, 120, 0.4);
}

.toggle-data-btn:hover {
	transform: translateY(-2rpx);
}

.toggle-data-btn .iconfont {
	font-size: 28rpx;
}

.refresh-btn {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 16rpx 32rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	border: none;
	border-radius: 16rpx;
	font-size: 28rpx;
	font-weight: 600;
	transition: all 0.3s ease;
	box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.4);
}

.refresh-btn:hover {
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.5);
}

.refresh-btn .iconfont {
	font-size: 28rpx;
}

/* 数据洞察面板 */
.insights-panel {
	background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
	border-radius: 20rpx;
	padding: 32rpx;
	margin-bottom: 40rpx;
	border: 2rpx solid #fed7d7;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
}

.insights-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24rpx;
}

.insights-title {
	display: flex;
	align-items: center;
	gap: 12rpx;
	font-size: 32rpx;
	font-weight: 600;
	color: #2d3748;
}

.insights-title .iconfont {
	font-size: 36rpx;
	color: #f6ad55;
}

.insights-badge {
	padding: 8rpx 16rpx;
	background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%);
	color: #fff;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: 600;
}

.insights-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.insight-item {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 24rpx;
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
	transition: all 0.3s ease;
	cursor: pointer;
	border-left: 6rpx solid #cbd5e0;
}

.insight-item:hover {
	transform: translateX(8rpx);
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.insight-item.success {
	border-left-color: #48bb78;
}

.insight-item.warning {
	border-left-color: #ed8936;
}

.insight-item.info {
	border-left-color: #4299e1;
}

.insight-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.insight-item.success .insight-icon {
	background: linear-gradient(135deg, #c6f6d5 0%, #9ae6b4 100%);
}

.insight-item.warning .insight-icon {
	background: linear-gradient(135deg, #feebc8 0%, #fbd38d 100%);
}

.insight-item.info .insight-icon {
	background: linear-gradient(135deg, #bee3f8 0%, #90cdf4 100%);
}

.insight-icon .iconfont {
	font-size: 32rpx;
}

.insight-item.success .insight-icon .iconfont {
	color: #276749;
}

.insight-item.warning .insight-icon .iconfont {
	color: #b7791f;
}

.insight-item.info .insight-icon .iconfont {
	color: #2c5282;
}

.insight-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.insight-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #2d3748;
}

.insight-desc {
	font-size: 24rpx;
	color: #718096;
	line-height: 1.5;
}

.insight-action {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 12rpx 20rpx;
	background: #f7fafc;
	border-radius: 12rpx;
	font-size: 24rpx;
	color: #667eea;
	font-weight: 600;
	transition: all 0.3s ease;
}

.insight-action:hover {
	background: #edf2f7;
}

.insight-action .iconfont {
	font-size: 20rpx;
}

/* 核心指标卡片 */
.overview-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300rpx, 1fr));
	gap: 32rpx;
	margin-bottom: 40rpx;
}

.metric-card {
	display: flex;
	align-items: center;
	gap: 24rpx;
	padding: 32rpx;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.metric-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6rpx;
	background: var(--card-color, #667eea);
}

.metric-card:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
}

.metric-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.metric-icon .iconfont {
	font-size: 40rpx;
	color: #fff;
}

.metric-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.metric-value {
	font-size: 48rpx;
	font-weight: 700;
	color: #1a202c;
	line-height: 1.2;
}

.metric-label {
	font-size: 28rpx;
	color: #718096;
	font-weight: 500;
}

.metric-trend {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 24rpx;
	font-weight: 600;
}

.metric-trend.positive {
	color: #38a169;
}

.metric-trend.negative {
	color: #e53e3e;
}

.trend-icon {
	font-size: 28rpx;
}

/* 数据分析网格 */
.analytics-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(600rpx, 1fr));
	gap: 32rpx;
	margin-bottom: 40rpx;
	align-items: start;
}

/* 图表面板 */
.chart-panel {
	background: #fff;
	border-radius: 20rpx;
	overflow: visible;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
	min-height: 680rpx;
}

.chart-panel:hover {
	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
}

.panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx;
	border-bottom: 2rpx solid #f7fafc;
}

.panel-title {
	display: flex;
	align-items: center;
	gap: 16rpx;
	font-size: 32rpx;
	font-weight: 600;
	color: #2d3748;
}

.panel-icon {
	font-size: 36rpx;
	color: #667eea;
}

.panel-tabs {
	display: flex;
	gap: 8rpx;
	background: #f7fafc;
	padding: 6rpx;
	border-radius: 12rpx;
}

.tab-item {
	padding: 12rpx 24rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: #718096;
	border-radius: 8rpx;
	cursor: pointer;
	transition: all 0.3s ease;
}

.tab-item.active {
	background: #fff;
	color: #667eea;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.chart-container {
	padding: 20rpx;
	height: 480rpx;
	width: 100%;
	position: relative;
	overflow: visible;
}

.chart-canvas {
	width: 100%;
	height: 100%;
	background: transparent;
	display: block;
	margin: 0 auto;
}

.chart-stats {
	display: flex;
	justify-content: space-around;
	padding: 24rpx 32rpx 32rpx;
	border-top: 2rpx solid #f7fafc;
}

.stat-item {
	text-align: center;
}

.stat-label {
	display: block;
	font-size: 24rpx;
	color: #718096;
	margin-bottom: 8rpx;
}

.stat-value {
	display: block;
	font-size: 32rpx;
	font-weight: 700;
	color: #2d3748;
}

/* 风险监控面板 */
.risk-panel {
	grid-column: 1 / -1;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
	border: 2rpx solid #fed7d7;
}

.risk-panel .panel-header {
	background: linear-gradient(135deg, #feb2b2 0%, #fed7d7 100%);
}

.risk-icon {
	color: #e53e3e !important;
}

.help-link {
	display: flex;
	align-items: center;
	gap: 8rpx;
	margin-left: 16rpx;
	cursor: pointer;
	padding: 8rpx 16rpx;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 20rpx;
	transition: all 0.3s ease;
}

.help-link:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: translateY(-2rpx);
}

.help-btn {
	width: 36rpx;
	height: 36rpx;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.help-btn .iconfont {
	font-size: 22rpx;
	color: #c53030;
}

.help-text {
	font-size: 24rpx;
	color: #742a2a;
	font-weight: 500;
	white-space: nowrap;
}

.risk-level {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 12rpx 20rpx;
	border-radius: 12rpx;
	font-size: 26rpx;
	font-weight: 600;
}

.risk-level.low {
	background: #c6f6d5;
	color: #276749;
}

.risk-level.medium {
	background: #fef5e7;
	color: #b7791f;
}

.risk-level.high {
	background: #fed7d7;
	color: #c53030;
}

.risk-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background: currentColor;
}

.risk-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400rpx, 1fr));
	gap: 32rpx;
	padding: 32rpx;
}

.risk-metric-card {
	padding: 24rpx;
	background: #fafafa;
	border-radius: 16rpx;
	border: 2rpx solid #f0f0f0;
}

.risk-metric-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.risk-metric-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #2d3748;
}

.risk-metric-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40rpx;
	height: 40rpx;
	padding: 0 12rpx;
	background: #e53e3e;
	color: #fff;
	font-size: 24rpx;
	font-weight: 700;
	border-radius: 20rpx;
}

.risk-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.risk-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx 20rpx;
	background: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.risk-item-name {
	font-size: 26rpx;
	color: #2d3748;
	font-weight: 500;
}

.risk-item-rate,
.risk-item-count {
	font-size: 24rpx;
	font-weight: 600;
	color: #64748b;
}

.risk-item-level {
	padding: 6rpx 12rpx;
	border-radius: 8rpx;
	font-size: 22rpx;
	font-weight: 600;
}

.risk-item-level.high {
	background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
	color: #b91c1c;
}

.risk-item-level.medium {
	background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
	color: #a16207;
}

.risk-item-level.low {
	background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
	color: #047857;
}

/* 频繁违规用户项 */
.risk-user-item {
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.risk-user-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6rpx;
	background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
	transform: scaleY(0);
	transition: transform 0.3s ease;
}

.risk-user-item:hover {
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	transform: translateX(8rpx);
}

.risk-user-item:hover::before {
	transform: scaleY(1);
}

.risk-user-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.risk-user-main {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.risk-user-level {
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	font-size: 20rpx;
	font-weight: 600;
	white-space: nowrap;
}

.risk-user-level.high {
	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
	color: #991b1b;
}

.risk-user-level.medium {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	color: #92400e;
}

.risk-user-level.low {
	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
	color: #065f46;
}

.risk-user-meta {
	display: flex;
	align-items: center;
	gap: 24rpx;
}

.risk-user-meta .risk-item-count {
	font-size: 22rpx;
	color: #64748b;
	font-weight: 500;
}

.risk-user-tip {
	font-size: 20rpx;
	color: #94a3b8;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.risk-user-item:hover .risk-user-tip {
	opacity: 1;
}

.risk-item-arrow {
	font-size: 24rpx;
	color: #cbd5e0;
	margin-left: 16rpx;
	transition: all 0.3s ease;
}

.risk-user-item:hover .risk-item-arrow {
	color: #64748b;
	transform: translateX(4rpx);
}


/* 响应式设计 */
@media (max-width: 1200px) {
	.analytics-grid {
		grid-template-columns: 1fr;
	}
	
	.risk-metrics {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.analytics-page {
		padding: 24rpx;
	}
	
	.toolbar {
		flex-direction: column;
		gap: 24rpx;
		align-items: stretch;
	}
	
	.toolbar-right {
		justify-content: space-between;
	}
	
	.overview-cards {
		grid-template-columns: 1fr;
	}
	
	.report-actions {
		flex-direction: column;
	}
	
	.report-btn {
		justify-content: center;
	}
}

/* 风险规则弹窗样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 40rpx;
	backdrop-filter: blur(4rpx);
}

.modal-content {
	background: #fff;
	border-radius: 24rpx;
	max-width: 900rpx;
	width: 100%;
	max-height: 85vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
	animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(40rpx);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.modal-header {
	padding: 32rpx 40rpx;
	border-bottom: 2rpx solid #f0f0f0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
}

.modal-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #2d3748;
}

.modal-close {
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(71, 85, 105, 0.1);
	cursor: pointer;
	transition: all 0.3s ease;
}

.modal-close:hover {
	background: rgba(71, 85, 105, 0.2);
	transform: rotate(90deg);
}

.modal-close .iconfont {
	font-size: 32rpx;
	color: #475569;
}

.modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 40rpx;
}

.rule-section {
	margin-bottom: 40rpx;
	padding: 32rpx;
	background: #f8fafc;
	border-radius: 16rpx;
	border-left: 6rpx solid #94a3b8;
}

.rule-section:last-child {
	margin-bottom: 0;
}

.rule-title {
	display: flex;
	align-items: center;
	gap: 12rpx;
	margin-bottom: 24rpx;
	font-size: 32rpx;
	font-weight: 700;
	color: #2d3748;
}

.rule-icon {
	font-size: 36rpx;
}

.rule-text {
	color: #2d3748;
}

.rule-desc {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
	margin-bottom: 20rpx;
	padding-left: 48rpx;
}

.rule-desc:last-child {
	margin-bottom: 0;
}

.rule-label {
	font-size: 28rpx;
	font-weight: 600;
	color: #6b7280;
	margin-bottom: 8rpx;
}

.rule-desc text {
	font-size: 26rpx;
	color: #718096;
	line-height: 1.8;
}

.rule-footer {
	margin-top: 32rpx;
	padding: 24rpx;
	background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
	border-radius: 12rpx;
	border: 2rpx solid #bfdbfe;
}

.footer-note {
	font-size: 26rpx;
	color: #1e40af;
	line-height: 1.8;
	font-weight: 500;
}

.modal-actions {
	padding: 24rpx 40rpx;
	border-top: 2rpx solid #f0f0f0;
	display: flex;
	justify-content: center;
}

.modal-btn {
	padding: 20rpx 60rpx;
	border-radius: 16rpx;
	font-size: 28rpx;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.modal-btn.primary {
	background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
	color: #fff;
	box-shadow: 0 4rpx 15rpx rgba(148, 163, 184, 0.3);
	font-weight: 700;
}

.modal-btn.primary:hover {
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 20rpx rgba(148, 163, 184, 0.4);
}

/* 动画效果 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.metric-card,
.chart-panel,
.risk-panel,
.report-section {
	animation: fadeInUp 0.6s ease-out;
}

.metric-card:nth-child(1) { animation-delay: 0.1s; }
.metric-card:nth-child(2) { animation-delay: 0.2s; }
.metric-card:nth-child(3) { animation-delay: 0.3s; }
.metric-card:nth-child(4) { animation-delay: 0.4s; }

/* 加载状态 */
.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* 图表容器优化 */
.chart-container {
	position: relative;
	background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.chart-canvas {
	border-radius: 12rpx;
}

/* 用户详情弹窗样式 */
.user-detail-modal {
	background: #fff;
	border-radius: 24rpx;
	max-width: 1000rpx;
	width: 95%;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
	animation: modalSlideIn 0.3s ease-out;
}

.user-detail-modal .modal-header {
	background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
	padding: 32rpx 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-header-left {
	display: flex;
	align-items: center;
	gap: 24rpx;
	flex: 1;
}

.user-detail-modal .modal-title {
	color: #fff;
	font-size: 36rpx;
	font-weight: 700;
}

.user-risk-badge {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10rpx);
}

.user-risk-badge.high {
	background: rgba(254, 202, 202, 0.9);
	color: #b91c1c;
	border: 2rpx solid rgba(248, 180, 180, 0.7);
}

.user-risk-badge.medium {
	background: rgba(254, 240, 138, 0.9);
	color: #a16207;
	border: 2rpx solid rgba(250, 230, 120, 0.7);
}

.user-risk-badge.low {
	background: rgba(187, 247, 208, 0.9);
	color: #047857;
	border: 2rpx solid rgba(167, 243, 208, 0.7);
}

.user-risk-badge .iconfont {
	font-size: 24rpx;
}

.user-detail-modal .modal-close {
	background: rgba(255, 255, 255, 0.2);
}

.user-detail-modal .modal-close .iconfont {
	color: #fff;
}

.user-detail-modal .modal-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.user-detail-modal .modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 32rpx;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* 信息区块 */
.info-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.info-section:last-child {
	margin-bottom: 0;
}

.section-title {
	display: flex;
	align-items: center;
	gap: 12rpx;
	font-size: 32rpx;
	font-weight: 700;
	color: #334155;
	margin-bottom: 24rpx;
	padding-bottom: 16rpx;
	border-bottom: 3rpx solid #cbd5e0;
}

.section-title .iconfont {
	font-size: 36rpx;
	color: #64748b;
}

/* 信息网格 */
.info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24rpx;
}

.info-item {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.info-label {
	font-size: 24rpx;
	color: #64748b;
	font-weight: 500;
}

.info-value {
	font-size: 28rpx;
	color: #334155;
	font-weight: 600;
	word-break: break-all;
}

.info-value.status {
	display: inline-flex;
	align-items: center;
	padding: 6rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	width: fit-content;
}

.info-value.status.active {
	background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
	color: #1e40af;
}

.info-value.status.disabled {
	background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
	color: #991b1b;
}

/* 违规统计 */
.violation-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24rpx;
}

.stat-box {
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	border-radius: 16rpx;
	padding: 32rpx;
	text-align: center;
	border: 2rpx solid #cbd5e0;
	transition: all 0.3s ease;
}

.stat-box:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 20rpx rgba(148, 163, 184, 0.15);
	border-color: #94a3b8;
}

.stat-number {
	display: block;
	font-size: 48rpx;
	font-weight: 700;
	color: #334155;
	margin-bottom: 12rpx;
}

.stat-number.risk {
	font-size: 36rpx;
	padding: 8rpx 20rpx;
	border-radius: 12rpx;
	display: inline-block;
}

.stat-number.risk.high {
	background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
	color: #b91c1c;
}

.stat-number.risk.medium {
	background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
	color: #a16207;
}

.stat-number.risk.low {
	background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
	color: #047857;
}

.stat-label {
	display: block;
	font-size: 24rpx;
	color: #64748b;
	font-weight: 500;
}

/* 违规记录 */
.violation-records {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.record-item {
	background: #f8fafc;
	border-radius: 12rpx;
	padding: 20rpx;
	border-left: 6rpx solid #94a3b8;
	transition: all 0.3s ease;
}

.record-item:hover {
	background: #f1f5f9;
	transform: translateX(8rpx);
	box-shadow: 0 4rpx 12rpx rgba(148, 163, 184, 0.12);
	border-left-color: #64748b;
}

.record-header {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-bottom: 16rpx;
}

.record-index {
	width: 48rpx;
	height: 48rpx;
	background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	font-weight: 700;
	flex-shrink: 0;
}

.record-type {
	flex: 1;
	font-size: 28rpx;
	font-weight: 600;
	color: #334155;
}

.record-time {
	font-size: 24rpx;
	color: #64748b;
	font-weight: 500;
}

.record-content {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
	padding-left: 64rpx;
}

.record-row {
	display: flex;
	gap: 8rpx;
	font-size: 26rpx;
	line-height: 1.6;
}

.record-label {
	color: #64748b;
	font-weight: 500;
	flex-shrink: 0;
}

.record-text {
	color: #334155;
	flex: 1;
}

.no-records {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80rpx 32rpx;
	gap: 16rpx;
}

.no-records .iconfont {
	font-size: 96rpx;
	color: #cbd5e0;
	opacity: 0.6;
}

.no-records text:last-child {
	font-size: 28rpx;
	color: #a0aec0;
}

.user-detail-modal .modal-actions {
	padding: 24rpx 40rpx;
	border-top: 2rpx solid #e2e8f0;
	background: #fff;
}

.modal-btn.secondary {
	background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
	color: #fff;
	box-shadow: 0 4rpx 15rpx rgba(148, 163, 184, 0.25);
	padding: 20rpx 60rpx;
	border-radius: 16rpx;
	font-size: 28rpx;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.modal-btn.secondary:hover {
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 20rpx rgba(148, 163, 184, 0.35);
	background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

/* 响应式 */
@media (max-width: 768px) {
	.info-grid {
		grid-template-columns: 1fr;
	}
	
	.violation-stats {
		grid-template-columns: 1fr;
	}
	
	.user-detail-modal {
		width: 100%;
		max-height: 95vh;
	}
}

/* 任务详情弹窗样式 */
.task-detail-modal {
	background: #fff;
	border-radius: 24rpx;
	max-width: 1000rpx;
	width: 95%;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
	animation: modalSlideIn 0.3s ease-out;
}

.task-detail-modal .modal-header {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	padding: 32rpx 40rpx;
}

.task-detail-modal .modal-title {
	color: #fff;
	font-size: 36rpx;
	font-weight: 700;
}

.task-risk-badge {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10rpx);
}

.task-risk-badge.high {
	background: rgba(254, 202, 202, 0.9);
	color: #b91c1c;
	border: 2rpx solid rgba(248, 180, 180, 0.7);
}

.task-risk-badge.medium {
	background: rgba(254, 240, 138, 0.9);
	color: #a16207;
	border: 2rpx solid rgba(250, 230, 120, 0.7);
}

.task-risk-badge.low {
	background: rgba(187, 247, 208, 0.9);
	color: #047857;
	border: 2rpx solid rgba(167, 243, 208, 0.7);
}

.task-risk-badge .iconfont {
	font-size: 24rpx;
}

.task-detail-modal .modal-close {
	background: rgba(255, 255, 255, 0.2);
}

.task-detail-modal .modal-close .iconfont {
	color: #fff;
}

.task-detail-modal .modal-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.task-detail-modal .modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 32rpx;
	background: linear-gradient(135deg, #fff5f7 0%, #fef5f9 100%);
}

/* 风险分析图表 */
.risk-analysis-box {
	padding: 24rpx;
	background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
	border-radius: 12rpx;
	border: 2rpx solid #e2e8f0;
}

.analysis-chart {
	width: 100%;
}

.chart-bar {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.bar-item {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.bar-label {
	font-size: 26rpx;
	color: #475569;
	font-weight: 600;
	min-width: 80rpx;
}

.bar-bg {
	flex: 1;
	height: 36rpx;
	background: #e2e8f0;
	border-radius: 18rpx;
	overflow: hidden;
	position: relative;
}

.bar-fill {
	height: 100%;
	border-radius: 18rpx;
	transition: width 0.6s ease;
	position: relative;
}

.bar-fill.success {
	background: linear-gradient(90deg, #48bb78 0%, #38a169 100%);
}

.bar-fill.danger {
	background: linear-gradient(90deg, #f56565 0%, #e53e3e 100%);
}

.bar-value {
	font-size: 28rpx;
	font-weight: 700;
	color: #1e293b;
	min-width: 60rpx;
	text-align: right;
}

/* 建议框 */
.advice-box {
	display: flex;
	gap: 20rpx;
	padding: 24rpx;
	border-radius: 12rpx;
	border-left: 6rpx solid #cbd5e0;
	background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.advice-box.high {
	border-left-color: #f56565;
	background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
}

.advice-box.medium {
	border-left-color: #ed8936;
	background: linear-gradient(135deg, #fffaf0 0%, #feebc8 100%);
}

.advice-box.low {
	border-left-color: #48bb78;
	background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
}

.advice-icon {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.6);
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.advice-box.high .advice-icon {
	color: #c53030;
}

.advice-box.medium .advice-icon {
	color: #c05621;
}

.advice-box.low .advice-icon {
	color: #2f855a;
}

.advice-icon .iconfont {
	font-size: 36rpx;
}

.advice-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.advice-text {
	font-size: 28rpx;
	color: #2d3748;
	line-height: 1.8;
	font-weight: 500;
}

.advice-steps {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
	margin-top: 8rpx;
}

.step-title {
	font-size: 26rpx;
	color: #475569;
	font-weight: 600;
	margin-bottom: 4rpx;
}

.step-item {
	font-size: 24rpx;
	color: #64748b;
	line-height: 1.8;
	padding-left: 12rpx;
}

/* 交易异常详情弹窗样式 */
.transaction-detail-modal {
	background: #fff;
	border-radius: 24rpx;
	max-width: 1000rpx;
	width: 95%;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
	animation: modalSlideIn 0.3s ease-out;
}

.transaction-detail-modal .modal-header {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	padding: 32rpx 40rpx;
}

.transaction-detail-modal .modal-title {
	color: #fff;
	font-size: 36rpx;
	font-weight: 700;
}

.transaction-risk-badge {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10rpx);
}

.transaction-risk-badge.high {
	background: rgba(254, 202, 202, 0.9);
	color: #b91c1c;
	border: 2rpx solid rgba(248, 180, 180, 0.7);
}

.transaction-risk-badge.medium {
	background: rgba(254, 240, 138, 0.9);
	color: #a16207;
	border: 2rpx solid rgba(250, 230, 120, 0.7);
}

.transaction-risk-badge.low {
	background: rgba(187, 247, 208, 0.9);
	color: #047857;
	border: 2rpx solid rgba(167, 243, 208, 0.7);
}

.transaction-risk-badge .iconfont {
	font-size: 24rpx;
}

.transaction-detail-modal .modal-close {
	background: rgba(255, 255, 255, 0.2);
}

.transaction-detail-modal .modal-close .iconfont {
	color: #fff;
}

.transaction-detail-modal .modal-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.transaction-detail-modal .modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 32rpx;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.info-item.full-width {
	grid-column: 1 / -1;
}

/* 风险指标 */
.risk-indicators {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24rpx;
}

.indicator-item {
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	border-radius: 16rpx;
	padding: 24rpx;
	border: 2rpx solid #cbd5e0;
	transition: all 0.3s ease;
}

.indicator-item:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
}

.indicator-item.high {
	border-color: #fca5a5;
	background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.indicator-item.medium {
	border-color: #fde047;
	background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
}

.indicator-item.low {
	border-color: #86efac;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.indicator-header {
	display: flex;
	align-items: center;
	gap: 12rpx;
	margin-bottom: 16rpx;
}

.indicator-icon {
	font-size: 32rpx;
}

.indicator-item.high .indicator-icon {
	color: #dc2626;
}

.indicator-item.medium .indicator-icon {
	color: #ca8a04;
}

.indicator-item.low .indicator-icon {
	color: #16a34a;
}

.indicator-title {
	font-size: 26rpx;
	font-weight: 600;
	color: #475569;
}

.indicator-bar {
	height: 12rpx;
	background: #e2e8f0;
	border-radius: 6rpx;
	overflow: hidden;
	margin-bottom: 12rpx;
}

.indicator-fill {
	height: 100%;
	border-radius: 6rpx;
	transition: width 0.8s ease;
}

.indicator-item.high .indicator-fill {
	background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%);
}

.indicator-item.medium .indicator-fill {
	background: linear-gradient(90deg, #eab308 0%, #ca8a04 100%);
}

.indicator-item.low .indicator-fill {
	background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

.indicator-value {
	font-size: 24rpx;
	font-weight: 600;
	color: #334155;
}

.transaction-detail-modal .modal-actions {
	padding: 24rpx 40rpx;
	border-top: 2rpx solid #e2e8f0;
	background: #fff;
	display: flex;
	gap: 16rpx;
	justify-content: center;
}

/* 响应式 - 交易和任务弹窗 */
@media (max-width: 768px) {
	.task-detail-modal,
	.transaction-detail-modal {
		width: 100%;
		max-height: 95vh;
	}
	
	.risk-indicators {
		grid-template-columns: 1fr;
	}
}
</style> 